<template>
  <div class='comment-item'>
    <div class='avatar_wrap'>
     <div class='wrap_left'>
        <img :src="userInfo.avatarUrl" alt="" class='avatar'>
        <p class='name' v-text='userInfo.nickName'></p>
     </div>
     <!-- <div class='wrap_right'>
       来自: <span class='jigou_name'>某某医疗机构</span>
     </div> -->
    </div>
    <div class='title_wrap'>
      <text class='title' v-text='Data.description'></text>
    </div>
    <div class='img_wrap'>
      <img :src="Data.fileUrls[0]" alt="" class='img' mode='widthFix'>
    </div>
    <div class='footer'>
      <div>
        意向: <span class='jigou_name' v-for='(item, index) in filterPartList' :key='index' v-if='index<2'>{{item}}</span>
      </div>
      <div class='footer_right'>
        <img src="/static/img/icon_time.png" alt="" class='icon_time'> <span v-text='Data.createTime'></span>
      </div>
    </div>
    <div class='doctor_wrap' v-if='doctorData.length'>
      <p class='doctor_title'>
        医生回答
      </p>
      <div class='doctor_content_wrap' @click='handleShowDetails'>
        <div class='doctor_content_item'>
          <div class='avatar_wrap'>
            <div class='wrap_left'>
                <img :src="doctorData[0].fromUser.iconUrl ? doctorData[0].fromUser.iconUrl:'/static/img/avatar.png'" alt="" class='avatar'>
                <p class='name' v-text='doctorData[0].fromUser.nickname'></p>
            </div>
            <div class='wrap_right'>
             <span class='jigou_name' v-text='doctorData[0].org.name'></span>
            </div>
          </div>
          <div class='content_item_text' v-text='doctorData[0].content.title'>
              <!-- 您的面部很适合做微创手术，我们非常专业，有20年的临床医师为您定制独一无二的方案。 -->
          </div>
        </div>
      </div>
      <div class='footer'>
        <span> </span>
      <div class='footer_right'>
        <img src="/static/img/icon_time.png" alt="" class='icon_time'> <span v-text='doctorData[0].createTime'></span>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import TYPE from '../enums/type'
  export default{
    name: 'Comment',
    data () {
      return {
        doctorData: []
      }
    },
    props: {
      Data: {
        required: true,
        default: {}
      }
    },
    onPullDownRefresh () {
      this.getDoctorComment(1, 100)
    },
    methods: {
      handleShowDetails () {
        const _this = this
        wx.navigateTo({
          url: `/pages/details/details?id=${_this.doctorData[0].id}&content=${JSON.stringify(_this.doctorData[0].content)}&doctorData=${JSON.stringify(_this.doctorData[0].fromUser)}&org=${JSON.stringify(_this.doctorData[0].org)}`
        })
      },
      getDoctorComment (pageIndex, pageSize) { // 获取医生的回复方案
        this.$http.get(`/wapp/scheme/${this.openId.openid}/${pageIndex}/${pageSize}`, {
          params: {
            desiredId: this.Data.id
          }
        }).then(res => {
          wx.stopPullDownRefresh()
          if (res) {
            this.doctorData = res.map((item) => {
              item.content = JSON.parse(item.content)
              return item
            })
          }
        }).catch(err => {
          wx.stopPullDownRefresh()
          console.log(err)
        })
      }
    },
    mounted () {
      this.getDoctorComment(1, 100)
    },
    computed: {
      ...mapState([
        'userInfo', 'openId'
      ]),
      filterPartList () { // 整形部位 转为中文
        return this.Data.partList.map(item => {
          let data = ''
          switch (item) {
            case TYPE.EYE.value:
              data = TYPE.EYE.comment
              break
            case TYPE.NOSE.value:
              data = TYPE.NOSE.comment
              break
            case TYPE.FACE.value:
              data = TYPE.FACE.comment
              break
            case TYPE.MOUTH.value:
              data = TYPE.MOUTH.comment
              break
            case TYPE.BREAST.value:
              data = TYPE.BREAST.comment
              break
            case TYPE.LIPOSUCTION.value:
              data = TYPE.LIPOSUCTION.comment
              break
            case TYPE.OTHER.value:
              data = TYPE.OTHER.comment
              break
          }
          return data
        })
      }
    },
    filters: {
      filterName (v) {
        let data = ''
        switch (v) {
          case TYPE.EYE.value:
            data = TYPE.EYE.comment
            break
          case TYPE.NOSE.value:
            data = TYPE.NOSE.comment
            break
          case TYPE.FACE.value:
            data = TYPE.FACE.comment
            break
          case TYPE.MOUTH.value:
            data = TYPE.MOUTH.comment
            break
          case TYPE.BREAST.value:
            data = TYPE.BREAST.comment
            break
          case TYPE.LIPOSUCTION.value:
            data = TYPE.LIPOSUCTION.comment
            break
          case TYPE.OTHER.value:
            data = TYPE.OTHER.comment
            break
        }
        return data
      }
    }
  }
</script>

<style lang='less' scoped>
  .comment-item{
    // height:600rpx;
    padding:24rpx 27rpx;
    // border:1px solid red;
    background: #fff;
    margin-bottom:20rpx;
    .doctor_wrap{
      margin-top:30rpx;
      .doctor_title{
        font-size:28rpx;
        color:#333;
        padding-bottom:17rpx;
        border-bottom:2px solid #333;
        width:116rpx;
      }
      .doctor_footer{
        display: flex;
      }
      .doctor_content_wrap{
        .doctor_content_item{
          border-top:1px solid #E9E9E9;
          padding-top:28rpx; 
          .content_item_text{
            text-align:justify; 
            font-size: 32rpx;
            color:#555;
            line-height: 1.3;
            padding-left: 82rpx;
            margin-top:32rpx;
          }
        }
      }
    }
    .avatar_wrap{
      display: flex;
      height:66rpx;
      justify-content: space-between;
      .wrap_left{
        display: flex;
        align-items: center;
        .avatar{
          width:66rpx;
          height:66rpx;
          border-radius: 35px;
        }
        .name{
          font-size:30rpx;
          margin-left:21rpx;
          color:#333;
        }
      }
      .wrap_right{
        display: flex;
        align-items: center;
        font-size:30rpx;
        color:#939393;
        .jigou_name{
          margin-left:18rpx;
        }
      }
    }
    .title_wrap{
      margin-top:25rpx;
      margin-bottom:23rpx;
      .title{
        color:#555;
        font-size:35rpx;
        line-height: 1.3;
      }
    }
    .img_wrap{
      max-height:400rpx;
      overflow: hidden;
      .img{
        width:100%;
      }
    }
    .footer{
      margin-top:32rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color:#999;
      font-size:29rpx;
      .footer_right{
        display: flex;
        align-items: center;
      }
      .jigou_name{
        margin-left:18rpx;
      }
      .icon_time{
        width:30rpx;
        height:30rpx;
        margin-right:18rpx;
      }
    }
  }
</style>

